<template>
  <el-container class="home">
    <el-aside width="240px">
      <category-nav />
    </el-aside>
    
    <el-main>
      <!-- 页面头部 -->
      <div class="page-header">
        <div class="header-left">
          <h2>{{ pageTitle }}</h2>
          <span class="bookmark-count" v-if="filteredBookmarks.length">
            {{ filteredBookmarks.length }} 个书签
          </span>
        </div>
        
        <div class="header-right">
          <el-input
            v-model="searchQuery"
            placeholder="搜索书签..."
            prefix-icon="el-icon-search"
            clearable
            @clear="handleSearch"
            @input="handleSearch"
          >
            <el-select
              v-model="sortBy"
              slot="append"
              placeholder="排序"
              style="width: 110px"
            >
              <el-option label="最近添加" value="createdAt"></el-option>
              <el-option label="最多点击" value="clickCount"></el-option>
              <el-option label="最近访问" value="lastClickedAt"></el-option>
              <el-option label="按标题" value="title"></el-option>
            </el-select>
          </el-input>
        </div>
      </div>

      <!-- 书签展示区域 -->
      <div class="bookmarks-container">
        <transition-group name="bookmark-list" tag="div" class="bookmarks-grid">
          <el-col
            v-for="bookmark in sortedBookmarks"
            :key="bookmark._id"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
            :xl="4"
          >
            <bookmark-card
              :bookmark="bookmark"
              :category="categoriesMap[bookmark.category]"
              @click="handleBookmarkClick"
            />
          </el-col>
        </transition-group>

        <!-- 加载状态 -->
        <div v-if="loading.bookmarks" class="loading-container">
          <el-spinner type="primary"></el-spinner>
          <p>加载中...</p>
        </div>

        <!-- 空状态 -->
        <el-empty
          v-else-if="!filteredBookmarks.length"
          :description="searchQuery ? '未找到相关书签' : '暂无书签'"
        >
          <template slot="description">
            <p>{{ searchQuery ? '未找到相关书签' : '暂无书签' }}</p>
            <small v-if="searchQuery" style="color: #909399">
              试试其他关键词？
            </small>
          </template>
        </el-empty>
      </div>

      <!-- 返回顶部 -->
      <el-backtop target=".el-main"></el-backtop>
    </el-main>
  </el-container>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import CategoryNav from '@/components/common/CategoryNav'
import BookmarkCard from '@/components/common/BookmarkCard'

export default {
  name: 'Home',
  components: {
    CategoryNav,
    BookmarkCard
  },
  data() {
    return {
      searchQuery: '',
      sortBy: 'createdAt',
      searchTimer: null
    }
  },
  computed: {
    ...mapState(['bookmarks', 'categories', 'loading', 'currentCategory']),
    ...mapGetters(['categoriesMap']),
    pageTitle() {
      if (this.currentCategory) {
        const category = this.categories.find(c => c._id === this.currentCategory)
        return category ? category.name : '全部书签'
      }
      return '全部书签'
    },
    filteredBookmarks() {
      if (!this.searchQuery) {
        return this.bookmarks
      }
      
      const query = this.searchQuery.toLowerCase()
      return this.bookmarks.filter(bookmark => 
        bookmark.title.toLowerCase().includes(query) ||
        bookmark.description?.toLowerCase().includes(query) ||
        bookmark.url.toLowerCase().includes(query)
      )
    },
    sortedBookmarks() {
      return [...this.filteredBookmarks].sort((a, b) => {
        switch (this.sortBy) {
          case 'clickCount':
            return (b.clickCount || 0) - (a.clickCount || 0)
          case 'lastClickedAt':
            return new Date(b.lastClickedAt || 0) - new Date(a.lastClickedAt || 0)
          case 'title':
            return a.title.localeCompare(b.title)
          default: // createdAt
            return new Date(b.createdAt) - new Date(a.createdAt)
        }
      })
    }
  },
  created() {
    // 获取分类列表
    this.$store.dispatch('fetchCategories')
    // 获取书签列表
    this.$store.dispatch('fetchBookmarks')
  },
  methods: {
    handleSearch() {
      // 延迟搜索，避免频繁触发
      clearTimeout(this.searchTimer)
      this.searchTimer = setTimeout(() => {
        this.$store.dispatch('fetchBookmarks', {
          search: this.searchQuery
        })
      }, 300)
    },
    handleBookmarkClick(bookmark) {
      this.$store.dispatch('incrementBookmarkClick', bookmark._id)
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  height: 100%;
  
  .el-aside {
    background-color: #fff;
    border-right: 1px solid #ebeef5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    z-index: 1;
  }
  
  .el-main {
    padding: 24px;
    background-color: #f5f7fa;
    overflow-x: hidden;
  }
  
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ebeef5;
    
    .header-left {
      display: flex;
      align-items: baseline;
      gap: 12px;
      
      h2 {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
        color: #303133;
      }
      
      .bookmark-count {
        color: #909399;
        font-size: 14px;
      }
    }
    
    .header-right {
      .el-input {
        width: 360px;
        
        /deep/ .el-input-group__append {
          background-color: #fff;
        }
      }
    }
  }
  
  .bookmarks-container {
    position: relative;
    min-height: 200px;
    
    .bookmarks-grid {
      margin: 0 -12px;
      
      .el-col {
        padding: 0 12px;
      }
    }
  }
  
  .loading-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    
    p {
      margin-top: 16px;
      color: #909399;
    }
  }
}

// 书签列表动画
.bookmark-list-enter-active,
.bookmark-list-leave-active {
  transition: all 0.5s ease;
}

.bookmark-list-enter,
.bookmark-list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

.bookmark-list-move {
  transition: transform 0.5s ease;
}

// 响应式设计
@media screen and (max-width: 1200px) {
  .home {
    .page-header {
      .header-right {
        .el-input {
          width: 300px;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .home {
    .el-aside {
      width: 100% !important;
      border-right: none;
      border-bottom: 1px solid #ebeef5;
    }
    
    .page-header {
      flex-direction: column;
      align-items: stretch;
      gap: 16px;
      
      .header-right {
        .el-input {
          width: 100%;
        }
      }
    }
    
    .bookmarks-container {
      .bookmarks-grid {
        margin: 0 -8px;
        
        .el-col {
          padding: 0 8px;
        }
      }
    }
  }
}
</style> 